<template>
  <section class="loadingbox">
    <div class="loading">
      <div class="circle-loader">
        <div class="circle-line">
          <div class="circle circle-blue"></div>
          <div class="circle circle-blue"></div>
          <div class="circle circle-blue"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-yellow"></div>
          <div class="circle circle-yellow"></div>
          <div class="circle circle-yellow"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-red"></div>
          <div class="circle circle-red"></div>
          <div class="circle circle-red"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-green"></div>
          <div class="circle circle-green"></div>
          <div class="circle circle-green"></div>
        </div>
      </div>
      <div class="loadingtext">正在登陆中.....</div>
    </div>
      
  </section>
</template>

<script>
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { ssoUserInfo } from '@/api/sso'

export default {
  components: {
  },

  data () {
    return {
      redirectUri: '',
      isdev: false
    }
  },

  computed: {
  },
  
  created () {
    this.getRouter()
  },

  mounted () {
  },

  methods: {
    ...mapActions(['Login', 'Logout']),

    getPageRouterUrl () {
      this.redirectUri = window.location.origin + '/#/redirect'
      this.redirectUri = encodeURIComponent(this.redirectUri)
    },

    /*
     * 获取路由上的参数
     */
    async getRouter () {
      /*
       * 获取参数上的code
       */
      const code = window.location.href.split('#')[1].split('code=')[1]
      console.log('window.location.origin', window.location.origin)
      console.log('window.location.href', window.location.href.split('#')[1].split('code=')[1])
      console.log('获取参数上的code', code)

      if (code) {
        // Remote Production API
        // const ret = await this.getSsoUserInfo(code)
        // console.log('SSO', ret.id_token)
        // console.log('SSO', ret.user_info.id)
        
        // Local Static Test
        const ret = {
          id_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBfa2V5IjoiYTk4ODBiYmY3MDIzOGM0YWU1ZjA3ZTBmZDBjMTZhMzEiLCJhcHBfc2VjcmV0IjoiMDcwMjkxZDY3NjdhY2ExMGJhN2U5MzlhNTU0MzEzNGYiLCJleHAiOjE2MjU2NTY1NDQsImlzcyI6InhpbnlhbiJ9.kHjrq92uRCvS15ViWhM6vZDTifSiPobQ9JoDMr4ZN0A',
          user_info: {
            id: 10001,
            login: 'admin',
            email: 'admin@localhost.com', 
            activated: true,
            createdBy: 'system',
            lastModifiedBy: 'admin',
            lastModifiedDate: '2021-07-07T18:05:41+08:00',
            authorities: ['ROLE_USER', 'ROLE_ADMIN'],
            apps: ['智能運維', '資源服務平臺', '全息檔案']
          }
        }

        localStorage.removeItem('ssoUserInfo')
        localStorage.setItem('ssoUserInfo', JSON.stringify(ret.user_info))

        this.Login(ret)
          .then((res) => this.loginSuccess(res))
          .catch((err) => this.requestFailed(err))
          .finally(() => {
            console.log('Login', code)
          })
      };
    },

    getSsoUserInfo (ssoCcode) {
      console.log('SSO.code', ssoCcode)
      const params = {
        code: ssoCcode
      }

      return new Promise((resolve, reject) => {
        ssoUserInfo(params).then((res) => {
            resolve(res)
          }).catch(error => {
            reject(error)
          }
        )
      })
    },

    loginSuccess (res) {
      console.log(res)
      this.$router.push({ path: '/' })

      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
      this.isLoginError = false
    },

    requestFailed (err) {
      this.isLoginError = true
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  }
}
</script>
<style lang="less" scoped>
.loadingbox{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #fff;
}
.loading{
  text-align: center;
}
.loadingtext{
  position: absolute;
  top: 60%;
  text-align: center;
  left: 0;
  right: 0;
  font-weight: 400;
  font-size: 14px;
  color: #555;
}
@-webkit-keyframes rotate-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes move-animation {
  0% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  25% {
    -webkit-transform: translate(-64px,0);
    transform: translate(-64px,0);
  }
  75% {
    -webkit-transform: translate(32px,0);
    transform: translate(32px,0);
  }
  100% {
    -webkit-transform: translate(0,0);
  }
}
@-webkit-keyframes move-animation {
  0%{
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  }
@keyframes move-animation {
  0% {
    -webkit-transform: translate(0,0);
  }
}
body {
  background-color: #F5F5F5;
}
 
.circle-loader {
  display: block;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform-origin: 16px 16px;
  transform-origin: 16px 16px;
  -webkit-animation: rotate-animation 5s infinite;
  animation: rotate-animation 5s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.circle-loader .circle {
  -webkit-animation: move-animation 2.5s infinite;
  animation: move-animation 2.5s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  position: absolute;
  left: 50%;
  top: 50%;
}
.circle-loader .circle-line {
  width: 64px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 0;
  -webkit-transform-origin: 4px 4px;
  transform-origin: 4px 4px;
}
.circle-loader .circle-line:nth-child(0) {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.circle-loader .circle-line:nth-child(1) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.circle-loader .circle-line:nth-child(2) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circle-loader .circle-line:nth-child(3) {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.circle-loader .circle-line .circle:nth-child(1) {
  width: 8px;
  height: 8px;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -4px;
  border-radius: 4px;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.circle-loader .circle-line .circle:nth-child(2) {
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border-radius: 8px;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.circle-loader .circle-line .circle:nth-child(3) {
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  border-radius: 12px;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.circle-loader .circle-blue {
  background-color: #1f4e5a;
}
.circle-loader .circle-red {
		background-color: #ff5955;
}
.circle-loader .circle-yellow {
		background-color: #ffb265;
}
.circle-loader .circle-green {
		background-color: #00a691;
}
.icon {
  @include wh(474, 438);
  margin-bottom: 10px;
}
.text {
  color: #999999;
  font-size: 16px;
  margin-bottom: 11px;
}
</style>
